<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="{{ asset('css/ext.css') }}" />
    @yield('css')
    <title>@yield('title')</title>
</head>
<body>
<!--Begin Header Begin-->
@include('layouts._header')
<!--End Header End-->
<!--Begin Menu Begin-->
<div class="menu_bg">
    <div class="menu">
        <!--Begin 商品分类详情 Begin-->
        <div class="nav" id="leftNav">
            <div  class="nav_t">全部商品分类</div>
            <div class="leftNav @yield('is_show','none')" @mouseleave="noShowType()">
                <ul >
                    <li v-for="(v,i) in data">
                        <div class="fj" @mouseenter="showType()" >
                            <span class="n_img"><span></span><img src="/images/extimg/nav1.png" /></span>
                            <span class="fl">@{{v.name}}</span>
                        </div>
                        <div class="zj" :index="i">
                            <div class="zj_l" v-if="v.son" >
                                <div class="zj_l_c" v-for="(v2,i2) in v['son']">
                                    <h2>@{{v2.name}}</h2> 
                                    <div v-if="v2.son">                                     
                                       <a href="#" v-for="(v3,i3) in v2['son']">@{{v3.name}}   |</a>
                                    </div>                                  
                                </div>
                                
                            </div>
                            <div class="zj_r">
                                <a href="#"><img src="/images/extimg/n_img1.jpg" width="236" height="200" /></a>
                                <a href="#"><img src="/images/extimg/n_img2.jpg" width="236" height="200" /></a>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <!--End 商品分类详情 End-->
        <ul class="menu_r">
            <li><a href="Index.html">首页</a></li>
            <li><a href="Food.html">美食</a></li>
            <li><a href="Fresh.html">生鲜</a></li>
            <li><a href="HomeDecoration.html">家居</a></li>
            <li><a href="SuitDress.html">女装</a></li>
            <li><a href="MakeUp.html">美妆</a></li>
            <li><a href="Digital.html">数码</a></li>
            <li><a href="GroupBuying.html">团购</a></li>
        </ul>
        <div class="m_ad">中秋送好礼！</div>
    </div>
</div>
<!--End Menu End-->
<div class="i_bg bg_color">

    @yield('main')

    <!--Begin Footer Begin -->
        @include('layouts._footer')
    <!--End Footer End -->
</div>

</body>

@yield('js')

    {{--编写js代码--}}
    <script src="{{ mix('js/app.js') }}"></script>
    <script type="text/javascript">
        $(document).on("click",".nav_t",function(){
            if ($('.leftNav').hasClass('none')) {
                $('.leftNav').removeClass('none')
            }else{
                $('.leftNav').addClass('none')
            }
        });

      new Vue({
            el:"#leftNav",
            data:{
                data:[],
                isshow:true
            },
           methods:{
                showType:function(e){
                    index = e.currentTarget.nextElementSibling.getAttribute('index');
                    e.currentTarget.nextElementSibling.style="display:block;top:-"+index*40+"px;";
                },
                noShowType:function(e){
                    e.currentTarget.nextElementSibling.style="display:none;";
                }
               
            },
            mounted() {
                axios.get("{{env('api_base_url')}}goods/cate_list").then(e=>this.data = this.data.concat(e.data))
            }
        })
   
        
    </script>
@show
</html>




